---
title: Valikkokohta
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Monipuolinen valikkokohta, joka on suunniteltu käytettäväksi valikossa tai navigointilistassa.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ominaisuudet  | Tyyppi           | Kuvaus                                                                                                                              |
| ------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Vasen ikoni   | IkoniKomponentti | Valinnainen vasen ikoni, joka näkyy ennen tekstiä valikkokohdassa                                                                   |
| korostus      | merkkijono       | Määrittää valikkokohdan korostusvärin. Vaihtoehdot sisältävät: `default`, `danger` ja `placeholder` |
| teksti        | merkkijono       | Valikkokohdan teksti                                                                                                                |
| kuvakeNapit   | taulukko         | An array of objects representing additional icon buttons associated with the menu item                                              |
| isTooltipOpen | looginen         | Säätää valikkokohteeseen liittyvän työkaluvihjeen näkyvyyttä                                                                        |
| testiId       | merkkijono       | data-testid-attribuutti testaukseen                                                                                                 |
| onClick       | toiminto         | Callback-funktio, joka laukaistaan, kun valikkokohde napsautetaan                                                                   |
| className     | string           | Valinnainen nimi lisätyyliksi                                                                                                       |

</Tab>
</Tabs>

## Variantit

Valikkokohta-komponentin eri variantit sisältävät seuraavat:

### Komento

Komento-tyylinen valikkokohta valikossa ilmoittamaan näppäinyhdistelmistä.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ominaisuudet | Tyyppi           | Kuvaus                                                            |
| ------------ | ---------------- | ----------------------------------------------------------------- |
| Vasen ikoni  | IkoniKomponentti | Valinnainen vasen ikoni, joka näkyy ennen tekstiä valikkokohdassa |
| teksti       | merkkijono       | Valikkokohdan teksti                                              |
| firstHotKey  | merkkijono       | Ensimmäinen komentoon liittyvä pikanäppäin                        |
| secondHotKey | string           | Toinen komentoon liittyvä pikanäppäin                             |
| onValittu    | looginen         | Ilmaisee, onko valikkokohde valittu tai korostettu                |
| onClick      | funktio          | Callback-funktio, joka laukaistaan, kun valikkokohde napsautetaan |
| luokanNimi   | merkkijono       | Valinnainen nimi lisätyyliksi                                     |

</Tab>
</Tabs>

### Vedettävä

Vedettävä valikkokohdekomponentti, joka on suunniteltu käytettäväksi valikossa tai luettelossa, jossa kohteita voidaan vetää ja lisätoimia suorittaa ikonipainikkeilla.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ominaisuudet   | Tyyppi           | Kuvaus                                                                                              |
| -------------- | ---------------- | --------------------------------------------------------------------------------------------------- |
| Vasen ikoni    | IkoniKomponentti | Valinnainen vasen ikoni, joka näkyy ennen tekstiä valikkokohdassa                                   |
| korostus       | merkkijono       | Valikkokohteen korostusväri. Se voi olla joko `default`, `placeholder` tai `danger` |
| kuvakeNapit    | taulukko         | An array of objects representing additional icon buttons associated with the menu item              |
| isTooltipOpen  | boolean          | Säätää valikkokohteeseen liittyvän työkaluvihjeen näkyvyyttä                                        |
| onClick        | toiminto         | Callback-funktio, joka aktivoituu, kun linkkiä klikataan                                            |
| teksti         | merkkijono       | Valikkokohdan teksti                                                                                |
| isDragDisabled | looginen         | Ilmaisee, onko veto estetty                                                                         |
| className      | merkkijono       | Valinnainen nimi lisätyyliksi                                                                       |

</Tab>
</Tabs>

### Monivalinta

Tarjoaa tavan toteuttaa monivalintatoiminto liittyvällä valintaruudulla.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ominaisuudet   | Tyyppi           | Kuvaus                                                                      |
| -------------- | ---------------- | --------------------------------------------------------------------------- |
| Vasen ikoni    | IkoniKomponentti | Valinnainen vasen ikoni, joka näkyy ennen tekstiä valikkokohdassa           |
| teksti         | string           | Valikkokohdan teksti                                                        |
| valittu        | looginen         | Ilmaisee, onko valikkokohde valittu (valintaruutu rasti) |
| onSelectChange | funktio          | Callback-funktio, joka laukaistaan, kun valintaruudun tila muuttuu          |
| className      | merkkijono       | Valinnainen nimi lisätyyliksi                                               |

</Tab>
</Tabs>

### Multi Select Avatar

Monivalintavalikkokohde avatar-kuvalla, valintaruudulla valitsemiseen ja tekstisisällöllä.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ominaisuudet   | Tyyppi      | Kuvaus                                                                      |
| -------------- | ----------- | --------------------------------------------------------------------------- |
| avatar         | `ReactNode` | Avatar tai kuvake, joka näytetään valikkokohdan vasemmalla puolella         |
| teksti         | merkkijono  | Valikkokohdan teksti                                                        |
| valittu        | looginen    | Ilmaisee, onko valikkokohde valittu (valintaruutu rasti) |
| onSelectChange | toiminto    | Callback-funktio, joka laukaistaan, kun valintaruudun tila muuttuu          |
| className      | merkkijono  | Valinnainen nimi lisätyyliksi                                               |

</Tab>
</Tabs>

### Navigoi

Valikkokohde, jossa on valinnainen vasen ikoni, tekstisisältö ja oikealle osoittava nuoli-ikoni.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ominaisuudet | Tyyppi           | Kuvaus                                                              |
| ------------ | ---------------- | ------------------------------------------------------------------- |
| Vasen ikoni  | IkoniKomponentti | Valinnainen vasen ikoni, joka näkyy ennen tekstiä valikkokohdassa   |
| teksti       | merkkijono       | Valikkokohdan teksti                                                |
| onClick      | funktio          | Takaisinsoittofunctio, joka aktivoituu, kun valikkokohtaa klikataan |
| className    | merkkijono       | Valinnainen nimi lisätyyliksi                                       |

</Tab>
</Tabs>

### Valinta

A selectable menu item, featuring optional left content (icon and text) and an indicator (check icon) for the selected state.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Rekvisiitat   | Tyyppi           | Kuvaus                                                                      |
| ------------- | ---------------- | --------------------------------------------------------------------------- |
| Vasen ikoni   | IkoniKomponentti | Valinnainen vasen ikoni, joka näkyy ennen tekstiä valikkokohdassa           |
| teksti        | string           | Valikkokohdan teksti                                                        |
| valittu       | looginen         | Ilmaisee, onko valikkokohde valittu (valintaruutu rasti) |
| pois käytöstä | looginen         | Ilmaisee, onko valikkokohta pois käytöstä                                   |
| hovered       | looginen         | Ilmaisee, onko hiiri valikkokohteen päällä tällä hetkellä                   |
| onClick       | toiminto         | Takaisinsoittofunctio, joka aktivoituu, kun valikkokohtaa klikataan         |
| className     | merkkijono       | Valinnainen nimi lisätyyliksi                                               |

</Tab>
</Tabs>

### Valitse avatar

Valittava valikkokohta, jossa on avatar, sisältää valinnaisen vasemmanpuoleisen sisällön (avatar ja teksti) ja valitulle tilalle tarkoitetun indikaattorin (valintamerkki-ikoni).

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Ominaisuudet  | Tyyppi      | Kuvaus                                                                      |
| ------------- | ----------- | --------------------------------------------------------------------------- |
| avatar        | `ReactNode` | Avatar tai kuvake, joka näytetään valikkokohdan vasemmalla puolella         |
| teksti        | merkkijono  | Valikkokohdan teksti                                                        |
| valittu       | boolean     | Ilmaisee, onko valikkokohde valittu (valintaruutu rasti) |
| pois käytöstä | boolean     | Ilmaisee, onko valikkokohta pois käytöstä                                   |
| hovered       | boolean     | Ilmaisee, onko hiiri valikkokohteen päällä tällä hetkellä                   |
| testiId       | merkkijono  | data-testid-attribuutti testaukseen                                         |
| onClick       | funktio     | Takaisinsoittofunctio, joka aktivoituu, kun valikkokohtaa klikataan         |
| className     | merkkijono  | Valinnainen nimi lisätyyliksi                                               |

</Tab>
</Tabs>

### Valitse väri

A selectable menu item with a color sample for scenarios where you want users to choose a color from a menu.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ominaisuudet  | Tyyppi     | Kuvaus                                                                                                                                                                                                                           |
| ------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| väri          | merkkijono | Teemaväri, joka näytetään valikkokohdassa mallina. Vaihtoehdot: `vihreä`, `turkoosi`, `taivas`, `sininen`, `violetti`, `pinkki`, `punainen`, `oranssi`, `keltainen` ja `harmaa`. |
| valittu       | looginen   | Ilmaisee, onko valikkokohde valittu (valintaruutu rasti)                                                                                                                                                      |
| pois käytöstä | looginen   | Ilmaisee, onko valikkokohta pois käytöstä                                                                                                                                                                                        |
| hovered       | looginen   | Ilmaisee, onko hiiri valikkokohteen päällä tällä hetkellä                                                                                                                                                                        |
| variantti     | string     | Värinäytteen variantti. Vaihtoehdot: `default` tai `pipeline`                                                                                                                                    |
| onClick       | funktio    | Takaisinsoittofunctio, joka aktivoituu, kun valikkokohtaa klikataan                                                                                                                                                              |
| className     | merkkijono | Valinnainen nimi lisätyyliksi                                                                                                                                                                                                    |

</Tab>
</Tabs>

### Vaihda

A menu item with an associated toggle switch to allow users to enable or disable a specific feature

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ominaisuudet   | Tyyppi           | Kuvaus                                                            |
| -------------- | ---------------- | ----------------------------------------------------------------- |
| Vasen ikoni    | Ikonikomponentti | Valinnainen vasen ikoni, joka näkyy ennen tekstiä valikkokohdassa |
| teksti         | string           | Valikkokohdan teksti                                              |
| toggled        | boolean          | Indicates whether the toggle switch is in the "on" or "off" state |
| OnToggleChange | toiminto         | Takaisinsoittofunktio, joka aktivoituu, kun kytkimen tila muuttuu |
| ToggleSize     | merkkijono       | Kytkimen koko. Se voi olla joko \\              |
| className      | string           | Valinnainen nimi lisätyyliksi                                     |

</Tab>
</Tabs>
